<template>
    <div class="person">
      <h2>姓名：{{person.name}}</h2>
      <h2>年龄：{{person.age}}</h2>
      <h2>性别：{{person.gender}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeGender">修改性别</button>
    </div>
  </template>
  
  <script lang="ts" setup name="ToRefsDemo1">
    import {ref,reactive,toRefs,toRef} from 'vue'
  
    // 数据
    let person = reactive({name:'张三', age:18, gender:'男'})
      
    // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
    let {name,gender} =  toRefs(person)//简单来说就是将person中的数据转化成了ref的格式
      
    // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
    let age = toRef(person,'age')
  
    // 方法
    function changeName(){
      //name.value += '~'
      person.name += '~'//其实方式都是一样的，没啥特别的情况
    }
    function changeAge(){
      age.value += 1
    }
    function changeGender(){
      gender.value = '女'
    }
  </script>